<template>
  <div id="cs-header">
    <template>
      <p class="title-name lf" v-if="path === '/systemList'">{{ system_name }}</p>
      <p class="title-name lf" v-else>{{ sysName }}</p>
      <div v-if="systemList.length > 0" class="lf system-list">
        <span v-for="item in systemList" :key="item.sys_no">
          <el-tooltip class="item" effect="dark" :content="item.sys_name" placement="bottom">
          <i class="iconfont" :class="{ isActive: sysNo === item.sys_no, [item.icon_id]: true }" @click="goSystem(item)"></i>
        </el-tooltip>
        </span>
      </div>
      <div class="rf">
        <template v-if="path !== '/systemList'">
          <template v-if="sysNo === 'M202'">
            <el-switch
              @change="handleAppSelect"
              v-model="curBugAppId"
              active-text="Android"
              inactive-text="IOS"
              :active-value=android_app_id
              :inactive-value=ios_app_id>
            </el-switch>
          <!--<el-button type="text" @click="isOpenCreate = true">
            <el-tooltip class="item" effect="dark" content="创建应用" placement="bottom">
              <i class="iconfont icon-add"></i>
            </el-tooltip>
          </el-button>-->
        </template>
        <template v-if="sysNo === 'M203' && path !== '/iap/workspace'">
          <span>当前工作区： {{workspaceName}}</span>
          <span @click="goHome">
            <el-tooltip class="item" effect="dark" content="切换工作区" placement="bottom">
              <i class="iconfont icon-switch"></i>
            </el-tooltip>
          </span>
        </template>
        <template  v-if="sysNo === 'M205' && path !== '/pushIndex'">
          <span class="gitback lf" @click="goPushIndex">
            <el-tooltip class="item" effect="dark" content="切换应用" placement="bottom">
              <i class="iconfont icon-switch"></i>
            </el-tooltip>
          </span>
        </template>
        </template>
        <span v-if="rbac === 1" @click="handleClick({ sys_no: 'M200', sys_url: '/systemHome/orgManager' })">
          <el-tooltip class="item" effect="dark" content="设置" placement="bottom">
            <i class="iconfont icon-optimise"></i>
          </el-tooltip>
        </span>
        <span class="goBack" @click="goBack" v-if="path !== '/systemList'">
          <el-tooltip class="item" effect="dark" content="返回" placement="bottom">
            <i class="iconfont icon-fanhui"></i>
          </el-tooltip>
        </span>
        <span class="logout" @click="logout">
          <el-tooltip class="item" effect="dark" content="退出" placement="bottom">
            <i class="iconfont icon-tuichu1"></i>
          </el-tooltip>
        </span>
      </div>
    </template>
    <!-- 创建应用窗口   -->
    <el-dialog :visible.sync="isOpenCreate" class="cs-dialog" @close="resetForm('bugAppForm')" width="500px" :append-to-body="true">
      <div class="dialog-box">
        <el-form class="form-box" ref="bugAppForm" :model="bugAppForm" :rules="bugAppRules">
          <el-form-item class="fm-item" prop="app_name">
            <el-input placeholder="请输入应用名称" v-model="bugAppForm.app_name" @keyup.native.enter="addApp"></el-input>
          </el-form-item>
          <el-form-item class="fm-item" prop="app_type">
            <span class="fm-label">选择平台</span>
            <ul class="plat-list">
              <li :class="{ 'active':platIndex === '0' }" @click="selectPlat('0')">
                <el-radio v-model="bugAppForm.app_type"></el-radio>
                <span>IOS</span>
              </li>
              <li :class="{ 'active':platIndex === '1' }" @click="selectPlat('1')">
                <el-radio v-model="bugAppForm.app_type"></el-radio>
                <span>Android</span>
              </li>
            </ul>
          </el-form-item>
          <el-form-item class="fm-item" prop="app_own">
            <el-input placeholder="请输入公司名称" v-model="bugAppForm.app_own" @keyup.native.enter="addApp"></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button type="primary" @click="addApp">创建应用</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import sysNameObj from '../../../sysNameObj'
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'
  import { mapGetters, mapMutations } from 'vuex'
  import { mixinParams } from '../../../assets/js/mixin1'
  import { nextPage } from '../../../assets/js/index'

  export default {
    name: 'cs-header',
    mixins: [mixinParams],
    data () {
      return {
        android_app_id: '',
        ios_app_id: '',
        system_name: '',
        username: '',
        applist: [], // 应用列表
        bugAppList: '', // 诊断应用列表
        isOpenCreate: false, // 诊断，控制创建应用的的弹窗
        bugAppForm: {
          app_name: '',
          app_type: '0',
          app_own: ''
        },
        bugAppRules: {
          app_name: [
            { required: true, message: '请输入应用名称', trigger: 'blur' },
            { min: 1, max: 50, message: '应用名称不能为空且限 50 个字符', trigger: 'blur' }
          ],
          app_own: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
            { min: 1, max: 20, message: '应用名称不能为空且限 20 个字符', trigger: 'blur' }
          ]
        },
        platIndex: '0',
        curAppId: '',
        curBugAppId: ''
      }
    },
    watch: {
      appObjFlag: {
        handler (val) {
          if (val) {
            this.queryBugAppList()
            this.appObjFlag = false
          }
        }
      }
    },
    computed: {
      ...mapGetters([
        'path',
        'sysNo',
        'sysName',
        'appId',
        'workspaceName',
        'appdatalist',
        'bugAppId',
        'systemList',
        'rbac'
      ])
    },
    methods: {
      ...mapMutations([
        'pd_updateAppId',
        'pd_updateApp',
        'pb_updateSysName',
        'pd_updateSysNo',
        'pd_updateApplist',
        'pd_updateBugAppId',
        'pd_updateBugApp',
        'v3_updateAppId',
        'v3_updateAppTitle',
        'v3_updateAppKey',
        'v3_updateSecretKey',
        'v3_updatePlatform'
      ]),
      queryTabList () {
        ajax.post(api.SELECTDETAIL_APPLICATION, { app_id: this.appId }).then(res => {
          this.android_app_id = res.data.android_app_id
          this.ios_app_id = res.data.ios_app_id
          this.curBugAppId = res.data.ios_app_id
          this.pd_updateBugAppId(this.curBugAppId)
        })
      },
      // 切换工作区域
      goPushIndex () {
        this.$confirm('确定要切换到应用首页吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.v3_updateAppId('')
          this.v3_updateAppTitle('')
          this.v3_updateAppKey('')
          this.v3_updateSecretKey('')
          this.v3_updatePlatform('')
          nextPage('/pushIndex')
        }).catch(() => {})
      },
      // 诊断切换当前应用
      handleAppSelect (val) {
        this.pd_updateBugAppId(this.curBugAppId)
        let bugAppObj = this.bugAppList.filter(item => {
          return item.app_id === this.curBugAppId
        })
        this.pd_updateBugApp(bugAppObj[0])
      },
      // 查询诊断应用列表
      queryBugAppList () {
        ajax.post(api.SELECT_APP_LIST).then(res => {
          this.bugAppList = res.data
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      // 添加应用
      addApp () {
        this.$refs.bugAppForm.validate((valid) => {
          if (valid) {
            ajax.post(api.INSERT_APP, this.bugAppForm).then(res => {
              this.isOpenCreate = false
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.platIndex = '0'
              this.$refs.bugAppForm.resetFields()
              this.queryBugAppList()
            })
          } else {
            return false
          }
        })
      },
      // 选择平台
      selectPlat (index) {
        if (this.platIndex === index) {
          this.platIndex = ''
          this.bugAppForm.app_type = ''
        } else {
          this.platIndex = index
          this.bugAppForm.app_type = index
        }
      },
      goHome () {
        this.$confirm('确定要切换到工作区首页吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          nextPage('/work/workspace')
          sessionStorage.removeItem('workspaceName')
          sessionStorage.removeItem('workspaceId')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      handleClick (item) {
        this.pd_updateSysNo(item.sys_no)
        ajax.post(api.GO_TO_SYSTEM, { sys_no: item.sys_no }).then((res) => {
          nextPage(item.sys_url)
        })
      },
      // 返回
      goBack () {
        sessionStorage.removeItem('sysName')
        sessionStorage.removeItem('sysNo')
        sessionStorage.removeItem('bugAppId')
        sessionStorage.removeItem('bugAppObj')
        window.location.href = '/view/systemList'
      },
      // 退出
      logout () {
        this.$confirm('将退出登录是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(api.LOGOUT).then(res => {
            sessionStorage.clear()
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            setTimeout(() => {
              window.location.href = '/'
            }, 300)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      },
      // 获取当前环境
      getEnv () {
        ajax.post(api.CHANGE_EVN, {exp_env: '1'}).then(res => {})
      },
      goSystem (obj) {
        this.pb_updateSysName(obj.sys_name)
        this.pd_updateSysNo(obj.sys_no)
        ajax.post(api.GO_TO_SYSTEM, { sys_no: obj.sys_no, app_id: this.appId }).then((res) => {
          if (obj.sys_no === 'M203') { // 发布
            ajax.post('/iap/gotoSetSession', { AppId: this.appId }).then(res => {
              nextPage(obj.sys_url)
            })
          } else if (obj.sys_no === 'M204') { // 网关
            ajax.post('/net/gotoWorkspace').then(res => {})
            nextPage(obj.sys_url)
          } else {
            nextPage(obj.sys_url)
          }
        })
      }
    },
    created () {
      this.queryTabList()
      this.getEnv()
      if (this.path === '/systemList') {
        if (sysNameObj.systemSwitch === 'ON') {
          this.system_name = sysNameObj.self.system_name
        } else {
          this.system_name = sysNameObj.other.system_name
        }
      }
      if (this.sysNo === 'M202') {
        this.queryBugAppList()
        if (this.bugAppId) {
          this.curBugAppId = this.bugAppId
        }
      }
      if ('username' in sessionStorage) {
        this.username = sessionStorage.getItem('username')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #cs-header
    height 50px
    line-height 50px
    padding 0 20px
    position relative
    z-index 99
    background #016dfb
    .title-name
      width 110px
      color #fff
      font-size 20px
    .system-list
      width 200px
      height 50px
      color #ffffff
      margin-left 100px
      i
        font-size 18px
        color #ddd
        cursor pointer
      .isActive
        color #fff
      span + span
        margin-left 20px
    .rf
      color #fff
      span
        display inline-block
        cursor pointer
        padding 0 10px
        color: #fff
      .el-switch.is-checked .el-switch__core
        border-color #fff
        background-color #a8c3ea
      .el-select
        .el-input
          .el-input__inner
            width 180px
            padding 0 !important
            color #fff
            background transparent
            border 0 none
            border-bottom 1px solid #fff
            border-radius 0
      .el-input__suffix
        padding 0
        .el-input__suffix-inner
          padding 0
          .el-select__caret
            color #fff
      .el-select .el-input .el-input__icon
        width 14px
      .el-button
        display inline-block
        height 40px
        line-height 40px
        padding 0
        color #fff
        cursor pointer
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color: #fff;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #fff;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #fff;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #fff;
    }
  .el-dialog
    height auto
    .dialog-box
      height 100%
      .main
        height calc(100% - 56px)
        margin 10px 0 20px 10px
        background #fff
      .form-box
        width 400px
        margin 0 auto
        .fm-item
          margin-bottom 20px
          .el-input
            border-bottom 1px solid #fff
            position relative
            input
              display block
              width 100%
              height 36px
              padding 6px 0
              line-height 24px
              border 0 none
            &:after
              content ''
              display block
              position absolute
              left 0
              right 100%
              height 1px
              bottom 0
              transition right .3s linear
          .el-form-item__error
            line-height 20px
          &.is-error
            .el-input
              &:after
                right 0
                background #f56c6c
          &.is-success
            .el-input
              &:after
                right 0
                background #4093ff
        .btn-box
          padding 10px 0
      .plat-list
        overflow hidden
        li
          float left
          width 50%
          padding 10px 0
          position relative
          .el-radio
            position absolute
            left 0
            top 0
            right 0
            bottom 0
            opacity 0
            z-index -1
          & > span
            display block
            padding 25px 15px 35px
            font-size 14px
            color #333
            line-height 24px
            text-align center
            margin 0 10px
            border 1px solid #fff
            position relative
            transition color .3s linear, border-color .3s linear
            &:after
              content '\e604'
              font-family 'iconfont'
              display block
              font-size 32px
              color #fff
              margin 3px auto 0
              transition color .3s linear
            &:before
              content '\e8f7'
              font-family 'iconfont'
              position absolute
              right 10px
              bottom 10px
              color #fff
              font-size 24px
              transition color .3s linear
          &:first-child
            & > span
              margin-left 0
          &:nth-child(2)
            & > span
              &:after
                content '\e615'
          &:last-child
            span
              margin-right 0
          &.active
            span
              color #4093ff
              border 1px solid #4093ff
              &:after
                color #4093ff
              &:before
                color #4093ff
      .btn-box
        .el-button
          display block
          width 100%
          height 36px
          line-height 36px
          padding 0
  .el-select-dropdown__item.selected
    color #4093ff
</style>
